<template>
  <div>
    <!-- 头部 -->
    <div class="solution-header"></div>
    <div class="solution-body">
      <div class="solution-tab">
        <span @click="handerClick" :class="tab == 1 ? 'active' : ''">解决方案</span>
        <span class="case" @click="handerClick2" :class="tab == 2 ? 'active' : ''">项目案例</span>
        <span @click="handerClick3" :class="tab == 3 ? 'active' : ''">硬件产品</span>
      </div>
    </div>
    <div class="solution-box" v-if="tab == 1">
      <div class="solution-title">
        搭建系统的功能全面与使用系统的简单方便完美融合，从简单数据采集监控，到复杂场景智能管理
        　　　　　　　　　中易云精心打造每一项功能，让您的物联网方案更完美！
      </div>
      <div class="solution-pic">
        <div v-for="(item, index) in 6" :key="index" style="margin-right: 0.08rem; margin-bottom: 0.25rem">
          <img src="@/assets/solutionimg/visualizationbj.png" alt="" />
          <div class="programme">
            <h3>燃气设备智能管理方案</h3>
            <p>燃气设备智能管理方案文字说明文字说明文字说明燃气设备智能管理方案文字说明文字说明文字说明燃气设备智能管理方案</p>
          </div>
        </div>
      </div>
    </div>
    <div class="solution-box" v-if="tab == 2">
      <div class="solution-title">
        搭建系统的功能全面与使用系统的简单方便完美融合，从简单数据采集监控，到复杂场景智能管理
        　　　　　　　　　中易云精心打造每一项功能，让您的物联网方案更完美！
      </div>
      <div class="solution-pics">
        <div class="solution-pics1">
          <img src="@/assets/solutionimg/anli1.png" class="solution-pics1one" alt="" />
          <div class="solution-pics2">中铁四局深圳明朗花园小区智慧工地系统</div>
          <div class="solution-pics3">
            系统融合物联网、视频监控、大数据分析等技术实现施工现场关键要素实时、全面、重点的监督和管理，能够将项目常用各业务系统和现场硬件设备集成至统一平台,数据通过图表直观呈现，实现数据多维度集成展示。平台统一入口，数据形成可视化看板。为决策层/管理层提供项目的整体管理指标（设备、人员、安全、质量、无人机巡航、绿色施工等），
            监控项目关键目标执行情况及预期情况，为项目成功保驾护航。
          </div>
        </div>
        <div class="solution-pics1">
          <img src="@/assets/solutionimg/anli2.png" class="solution-pics1one" alt="" />
          <div class="solution-pics2">XX国内工厂数字孪生系统</div>
          <div class="solution-pics3">
            通过1:1建模，进行电缆工厂中低压车间和布线车间的三维还原，并接入厂方提供的生产数据，在三维可视化的环境下动态展示各个关键过程的数据信息，以更加直观的方式帮助现场操作人员进行决策。
          </div>
        </div>
        <div class="solution-pics1">
          <img src="@/assets/solutionimg/anli3.png" class="solution-pics1one" alt="" />
          <div class="solution-pics2">十里泉工程项目安全监督平台</div>
          <div class="solution-pics3">
            依托大数据、互联网等信息化管理技术，针对工程项目监督管理“老大难”问题，采取定向监督、精准施策进行靶向治疗，以新思路、新方法、新技术摸索出适合工程板块的监督手段。利用市面各种智能安全帽、智能定位基站、智能电子标签、智能车载终端、智能安全帽综合控制箱、智能摄像头等，通过我们的PC端软件智能控制系统和手机端APP管理软件，运用精确的空间定位技术、移动数据通讯技术、物联网技术、云计算和大数据把互联网与传统产业的各个方面有机地联系起来，实现智能化一体化安全管理和智慧工地管理。
          </div>
        </div>
        <!-- <div v-for="(item, index) in 6" :key="index" style="margin-right: 0.08rem; margin-bottom: 0.25rem">
          <img src="@/assets/solutionimg/visualizationbj.png" alt="" />
          <div class="programme">
            <h3>燃气设备智能管理方案</h3>
            <p>燃气设备智能管理方案文字说明文字说明文字说明燃气设备智能管理方案文字说明文字说明文字说明燃气设备智能管理方案</p>
          </div>
        </div> -->
      </div>
    </div>
    <div v-if="tab == 3" class="tabspane">
      <el-tabs v-model="activeName">
        <el-tab-pane label="云模组" name="first">
          <div class="cloudmodule-title">提供多种通信协议、多种规格的云模组, 根据硬件类型灵活选择</div>
          <ul class="module-box">
            <li>
              <img src="@/assets/solutionimg/catmodule.png" alt="" class="img" />
              <div class="module">CAT.1模组</div>
            </li>
            <li style="margin: 0 3.6rem">
              <img src="@/assets/solutionimg/lotmodule.png" alt="" class="img" />
              <div class="module">NB-IoT模组</div>
            </li>
            <li>
              <img src="@/assets/solutionimg/zigmodule.png" alt="" class="img" />
              <div class="module">Zigbee3.0模组</div>
            </li>
            <li>
              <img src="@/assets/solutionimg/lanyamodule.png" alt="" class="img" />
              <div class="module">蓝牙模组</div>
            </li>
            <li style="margin: 0 3.6rem">
              <img src="@/assets/solutionimg/loramodule.png" alt="" class="img" />
              <div class="module">LORA模组</div>
            </li>
            <li>
              <img src="@/assets/solutionimg/wifimodule.png" alt="" class="img" />
              <div class="module">Wifi模组</div>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="云网关" name="second">
          <div class="cloudgateway-top">
            <div class="gateway-img">
              <img src="@/assets/solutionimg/gateway.png" alt="" />
            </div>
            <div class="cloudgateway-box">
              <h2 class="cloudgateway-title">罗斯蒙德网关</h2>
              <div class="jieshao">
                高集成度的无线通信设计能力，该设备在超小体积内集成了 ZigBee、以太网及 Wi-Fi 等
                多种通讯方式。全新的“即插即用”设计无需用户了解配置信息，仅需使用网线连接家用
                已有的路由器即可正常工作，可适用于无经验用户。该网关还可以取代家用无线路由器的
                功能，用户可以使用该设备同时进行网络浏览和智能家居控制等多种功能
              </div>
            </div>
          </div>
          <ul class="cloudgateway-bottom">
            <li>
              <div class="cloudgateway-img">
                <img src="@/assets/solutionimg/rich.png" alt="" />
              </div>
              <div class="cloudgateway-box">
                <h3>协议丰富</h3>
                <p>上百种工业协议，支持各种PLC/仪表/传感器接入</p>
              </div>
            </li>
            <li>
              <div class="cloudgateway-img">
                <img src="@/assets/solutionimg/linghuo.png" alt="" />
              </div>
              <div class="cloudgateway-box lianwang">
                <h3>联网灵活</h3>
                <p>支持2G/3G/4G/WiFi/网 线等多种联网方式</p>
              </div>
            </li>
            <li>
              <div class="cloudgateway-img">
                <img src="@/assets/solutionimg/caiji.png" alt="" />
              </div>
              <div class="cloudgateway-box">
                <h3>采集与控制</h3>
                <p>实时数据采集，反向控制 设备，采集周期可配</p>
              </div>
            </li>
            <li>
              <div class="cloudgateway-img">
                <img src="@/assets/solutionimg/jisuan.png" alt="" />
              </div>
              <div class="cloudgateway-box">
                <h3>边缘计算</h3>
                <p>采集数据多维度计算，计 算规则可配</p>
              </div>
            </li>
            <li>
              <div class="cloudgateway-img">
                <img src="@/assets/solutionimg/vpn.png" alt="" />
              </div>
              <div class="cloudgateway-box vpn">
                <h3>VPN</h3>
                <p>安全VPN通道，远程管理/调试设备</p>
              </div>
            </li>
            <li>
              <div class="cloudgateway-img">
                <img src="@/assets/solutionimg/duandian.png" alt="" />
              </div>
              <div class="cloudgateway-box margins">
                <h3>断点续传</h3>
                <p>极端条件断网，数据不丢 失;网络恢复，自动补齐</p>
              </div>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
// import "./../../assets/styles/index.css";
export default {
  data() {
    return {
      tab: 1,
      activeName: "first",
    };
  },
  created() {},
  mounted() {},
  methods: {
    handerClick() {
      this.tab = 1;
    },
    handerClick2() {
      this.tab = 2;
    },
    handerClick3() {
      this.tab = 3;
    },
  },
};
</script>

<style scoped>
.active {
  color: #155bd4;
}
.solution-header {
  width: 24rem;
  height: 5.25rem;
  background: url("~@/assets/solutionimg/solutionbj.png") no-repeat;
}

.solution-tab {
  cursor: pointer;
  margin: 0.3625rem 9rem;
  font-size: 0.3rem;
}

.solution-tab .case {
  margin: 0 0.8rem;
}

.solution-title {
  font-size: 0.25rem;
  margin: 0.375rem 6.3625rem;

  line-height: 0.5rem;
  color: #646566;
}

.solution-pic {
  margin: 0 4.5rem;
  display: flex;
  flex-wrap: wrap;
}
.solution-pics {
  position: relative;
  width: 15rem;
  height: 12.075rem;
  margin: 0 auto;
  /* margin: 0 4.5rem; */
  /* background-color: orange; */
  display: flex;
  flex-wrap: wrap;
}
.solution-pics1 {
  width: 15rem;
  height: 3.5rem;
  background: #ffffff;
  box-shadow: 0rem 0.025rem 0.15rem 0.0125rem rgba(50, 50, 51, 0.2);
  /* border-radius: 8px 8px 8px 8px; */
  opacity: 1;
}
.solution-pics1one {
  width: 6.2375rem;
  height: 3.5rem;
}
.solution-pics2 {
  position: absolute;
  margin: 0.25rem 2.9rem 2.8625rem 0.375rem;
  display: inline-block;
  width: 5.4875rem;
  height: 0.3875rem;
  font-size: 0.3rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.85);
  line-height: 0.3875rem;
}
.solution-pics3 {
  position: absolute;
  margin: 0.8875rem 0.375rem 0.85rem 0.375rem;
  display: inline-block;
  width: 8.0125rem;
  height: 1.7625rem;
  font-size: 0.2rem;
  font-weight: 400;
  color: #646566;
  line-height: 0.375rem;
  letter-spacing: 0.0125rem;
}
.solution-pic img {
  width: 4.825rem;
  height: 2.7125rem;
}

.programme {
  width: 4.825rem;
  height: 2.0375rem;
  box-shadow: 0px 0.0375rem 0.1rem 0.0125rem rgba(72, 72, 72, 0.1);
}

.programme h3 {
  font-size: 0.25rem;
  font-weight: 400;
  padding: 0.25rem 0 0.2rem 0.25rem;
}

.programme p {
  font-size: 0.2rem;
  color: #646566;
  font-weight: 400;
  line-height: 0.35rem;
  padding: 0 0.25rem 0.3rem 0.25rem;
}

.tabspane {
  margin: 0 4.5rem;
}

::v-deep .el-tabs__nav {
  width: 15rem;
}
::v-deep .el-tabs__item {
  /* margin-right: 0.5rem !important; */
  font-size: 0.25rem;
  color: rgba(0, 0, 0, 0.85);
  line-height: 0.325rem;
  width: 3.75rem;
  /* border-bottom: 1px solid #ffff; */
}
::v-deep .el-tabs__nav {
  width: 3.75rem;
  /* border-bottom: 1px solid #ffff; */
}
::v-deep .el-tabs__nav-wrap::after {
  background-color: #eeeeee !important;
  /* padding-bottom: .25rem; */
  /* lang="scss" */
}
/* ::v-deep .el-tabs__item:nth-child(2) {
  margin-right: 1rem;
  width: 3.75rem;
} */
::v-deep .el-tabs__item:nth-child(2) {
  margin-left: 1.5rem;
  width: 3.75rem;
}
/* .action {
  border-bottom: 2px solid #155bd4;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
} */
::v-deep .el-tabs__active-bar {
  bottom: 0.0362rem;
  width: 3.75rem;
  /* border-bottom: 1px solid #ffff; */
  /* width: 3.75rem; */
}

.cloudmodule-title {
  font-size: 0.275rem;
  font-weight: 400;
}

.module-box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.375rem;
}

.module {
  width: 2.5rem;
  height: 0.5rem;
  font-size: 0.25rem;
  background: #155bd4;
  border-radius: 0.35rem;
  text-align: center;
  line-height: 0.5rem;
  color: #ffffff;
  margin: 0.375rem 0;
}

.img {
  width: 2.5rem;
  height: 2.5rem;
}

.cloudgateway-top {
  display: flex;
}

.gateway-img img {
  width: 3.75rem;
  height: 3.75rem;
  margin: 0.7375rem 0 0 0.2875rem;
}

.jieshao {
  font-size: 0.25rem;
  line-height: 0.5rem;
}

.cloudgateway-title {
  font-size: 0.325rem;
  margin: 0.8125rem 0 0.375rem 5.05rem;
}

.cloudgateway-bottom {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.cloudgateway-bottom li {
  display: flex;
  width: 7.2rem;
  height: 2.75rem;
  background: #f6f9ff;
  margin-right: 0.1625rem;
  margin-bottom: 0.25rem;
}

.cloudgateway-img {
  width: 2.5rem;
  height: 1.225rem;
  margin: 0.7625rem 1.05rem 0.7625rem 0.25rem;
}

.cloudgateway-img img {
  width: 100%;
}

.cloudgateway-box h3 {
  font-size: 0.375rem;
  margin: 0.375rem 0;
}

.cloudgateway-box p {
  font-size: 0.275rem;
  line-height: 0.5rem;
  color: #7e7e7e;
  margin-right: 0.375rem;
}

.margins {
  margin-left: 0.5rem;
}

.vpn {
  margin-left: -0.5rem;
}

.lianwang {
  margin-left: 0.25rem;
}
</style>
